<template>
  <div class="flex">
    <div
      v-if="isExpired"
      class="circle"
    >
      <el-tooltip class="item" effect="light" content="服务已到期" placement="top-start">
        <span>过</span>
      </el-tooltip>
    </div>
    <div
      v-else-if="WillExpired"
      class="circle"
    >
      <el-tooltip class="item" effect="light" content="服务快到期，请及时修改有效期" placement="top-start">
        <span>!</span>
      </el-tooltip>
    </div>
    <div v-if="row.auditState==='FAIL'">
      <el-tooltip class="item" effect="light" :content="row.auditFailReason" placement="top-start">
        <span>{{ mapObj[row.auditState] }}</span>
      </el-tooltip>
    </div>
    <div v-else>
      <span>{{ mapObj[row.auditState] }}</span>
    </div>
  </div>
</template>

<script>
import moment from 'moment'

export default {
  props: {
    row: {
      type: Object,
      required: true
    },
    mapObj: {
      type: Object,
      required: true
    }
  },
  computed: {
    isExpired() {
      const validDate = this.row.endDate
      const date = new Date()
      const currentDate = moment(date).format('YYYY-MM-DD')
      return currentDate >= validDate
    },
    WillExpired() {
      const validDate = this.row.endDate
      const date = new Date()
      const oneMonths = date.getTime() + 30 * 24 * 3600 * 1000
      const oneDate = new Date(oneMonths)
      const currentDate = moment(oneDate).format('YYYY-MM-DD')
      return currentDate >= validDate
    }
  }
}
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
}
.circle {
  border-radius: 50%;
  width: 25px;
  height: 25px;
  border: solid rgb(0,0,0) 1px;
  margin-right: 5px;
}
</style>
